Add/skip pricing page when connecting from editor blocks #39865

CodeyGuyDylan · 2024-10-22T16:33:38Z

Proposed changes:

Add skipPricingPage prop to the useConnection hook that passes the skip_pricing param to the connection page
In the connect banner on editor components, go directly to connect page instead of redirecting to My Jetpack. This allows the user to connect and get back to what they were doing as quickly as possible

Other information:

Have you written new tests for your changes, if applicable?
Have you checked the E2E test CI results, and verified that your changes do not break them?
Have you tested your changes on WordPress.com, if applicable (if so, you'll see a generated comment below with a script to run)?

Jetpack product discussion

P2: pbNhbs-bQ3-p2

Does this pull request change what data or activity we track or use?

No

Testing instructions:

Checkout this branch via the Jetpack Beta plugin or your local dev environment
Connect your site but not your user account
Go to wp-admin/post-new.php to create a new post
Add any block that requires user connection (AI Assistant, for example)
Click on the Connection CTA, ensure you are sent to the main connection screen at https://wordpress.com/jetpack/connect/authorize
Ensure that the skip_pricing query parameter exists in the URL
Approve the connection or log-in if necessary
Ensure you are redirected back to the same post you were editing

github-actions · 2024-10-22T16:34:26Z

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

To test on WoA, go to the Plugins menu on a WordPress.com Simple site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin, and enable the add/skip-pricing-page-when-connecting-from-editor-blocks branch.
- For jetpack-mu-wpcom changes, also add define( 'JETPACK_MU_WPCOM_LOAD_VIA_BETA_PLUGIN', true ); to your wp-config.php file.

To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack add/skip-pricing-page-when-connecting-from-editor-blocks

bin/jetpack-downloader test jetpack-mu-wpcom-plugin add/skip-pricing-page-when-connecting-from-editor-blocks

Interested in more tips and information?

In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
Read more about our development workflow here: PCYsg-eg0-p2
Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

github-actions · 2024-10-22T16:34:36Z

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

✅ Include a description of your PR changes.
✅ Add a "[Status]" label (In Progress, Needs Team Review, ...).
✅ Add testing instructions.
✅ Specify whether this PR includes any changes to data or privacy.
✅ Add changelog entries to affected projects

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

The e2e test report can be found here. Please note that it can take a few minutes after the e2e tests checks are complete for the report to be available.

Follow this PR Review Process:

Ensure all required checks appearing at the bottom of this PR are passing.
Choose a review path based on your changes:
- A. Team Review: add the "[Status] Needs Team Review" label
  - For most changes, including minor cross-team impacts.
  - Example: Updating a team-specific component or a small change to a shared library.
- B. Crew Review: add the "[Status] Needs Review" label
  - For significant changes to core functionality.
  - Example: Major updates to a shared library or complex features.
- C. Both: Start with Team, then request Crew
  - For complex changes or when you need extra confidence.
  - Example: Refactor affecting multiple systems.
Get at least one approval before merging.

Still unsure? Reach out in #jetpack-developers for guidance!

Jetpack plugin:

The Jetpack plugin has different release cadences depending on the platform:

WordPress.com Simple releases happen semi-continuously (PCYsg-Jjm-p2).
WoA releases happen weekly.
Releases to self-hosted sites happen monthly. The next release is scheduled for November 5, 2024 (scheduled code freeze on November 4, 2024).

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.

CodeyGuyDylan · 2024-10-23T16:06:41Z

projects/packages/my-jetpack/_inc/components/connection-screen/body.tsx

+	logo?: React.ReactNode;
+}
+
+const ConnectionScreenBody: FC< ConnectScreenProps > = props => {


There were more changes on this page on a previous iteration, however this is still a typing improvement, so I think we can keep it

We should handle that at some point tho, since keeping two different types is not very maintainable.

I agree, I was thinking during the TypeScript refactor project 😄

IanRamosC

Left some nitpicks, but the functionality tests well.

IanRamosC · 2024-10-25T19:59:26Z

projects/plugins/jetpack/extensions/shared/components/connect-banner/index.tsx

+		autoTrigger: false,
+		skipPricingPage: true,
+	} );
+	const { autosave } = useAutosaveAndRedirect();
 	const { tracks } = useAnalytics();

 	const goToCheckoutPage = ( event: MouseEvent< HTMLButtonElement > ) => {


Minor nitpick: I know the name of the prop is goToCheckoutPage, but that's misleading in this scenario (especially after this change 😅 ). I think we could update at least the name of the method here.

IanRamosC · 2024-10-25T20:08:21Z

projects/plugins/jetpack/extensions/shared/components/connect-banner/index.tsx

+		// The redirection is handled this way to ensure we get the right redirectUri
+		// In the case that the post is new and unsaved, the component requires a re-render
+		// in order to get the correct URI when the handler is called.
+		if ( isRedirecting ) {


Another nitpick, this variable name could be something like isReadyToRedirect or something like that. To me, calling an action (handleConnectuser) when isRedirecting is true makes me think that it'll interrupt the redirect and do the other thing instead.

Nice workaround, btw 😅

…blocks

IanRamosC

Looks good!

github-actions bot added [JS Package] Connection [Package] My Jetpack RNA labels Oct 22, 2024

github-actions bot added [Status] Needs Author Reply We would need you to make some changes or provide some more details about your PR. Thank you! [Plugin] Jetpack Issues about the Jetpack plugin. https://wordpress.org/plugins/jetpack/ labels Oct 22, 2024

CodeyGuyDylan force-pushed the add/skip-pricing-page-when-connecting-from-editor-blocks branch from 73accdc to 6dcbdf2 Compare October 23, 2024 16:05

CodeyGuyDylan commented Oct 23, 2024

View reviewed changes

CodeyGuyDylan added [Status] Needs Team Review and removed [Status] Needs Author Reply We would need you to make some changes or provide some more details about your PR. Thank you! labels Oct 23, 2024

IanRamosC previously approved these changes Oct 25, 2024

View reviewed changes

CodeyGuyDylan dismissed IanRamosC’s stale review via 5e40bbc October 29, 2024 15:28

CodeyGuyDylan added 6 commits October 29, 2024 09:32

Add skipPricingPage option to connection package

9fc1299

changelog

6ab1199

Skip pricing page and connection screen when connecting from Jetpack …

61510fd

…blocks

changelog

a699563

Bypass My Jetpack connection page

b97f446

Update variable/function names in connect banner

b33d9c7

CodeyGuyDylan force-pushed the add/skip-pricing-page-when-connecting-from-editor-blocks branch from 5e40bbc to b33d9c7 Compare October 29, 2024 15:33

IanRamosC approved these changes Oct 29, 2024

View reviewed changes

CodeyGuyDylan merged commit 890e73b into trunk Oct 29, 2024
73 checks passed

CodeyGuyDylan deleted the add/skip-pricing-page-when-connecting-from-editor-blocks branch October 29, 2024 18:23

github-actions bot removed the [Status] Needs Team Review label Oct 29, 2024

github-actions bot added this to the jetpack/14.0 milestone Oct 29, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add/skip pricing page when connecting from editor blocks #39865

Add/skip pricing page when connecting from editor blocks #39865

CodeyGuyDylan commented Oct 22, 2024 •

edited

Loading

github-actions bot commented Oct 22, 2024 •

edited

Loading

github-actions bot commented Oct 22, 2024 •

edited

Loading

CodeyGuyDylan Oct 23, 2024

IanRamosC Oct 25, 2024

CodeyGuyDylan Oct 29, 2024

IanRamosC left a comment

IanRamosC Oct 25, 2024

IanRamosC Oct 25, 2024

IanRamosC Oct 25, 2024

IanRamosC left a comment

Add/skip pricing page when connecting from editor blocks #39865

Add/skip pricing page when connecting from editor blocks #39865

Conversation

CodeyGuyDylan commented Oct 22, 2024 • edited Loading

Proposed changes:

Other information:

Jetpack product discussion

Does this pull request change what data or activity we track or use?

Testing instructions:

github-actions bot commented Oct 22, 2024 • edited Loading

github-actions bot commented Oct 22, 2024 • edited Loading

CodeyGuyDylan Oct 23, 2024

Choose a reason for hiding this comment

IanRamosC Oct 25, 2024

Choose a reason for hiding this comment

CodeyGuyDylan Oct 29, 2024

Choose a reason for hiding this comment

IanRamosC left a comment

Choose a reason for hiding this comment

IanRamosC Oct 25, 2024

Choose a reason for hiding this comment

IanRamosC Oct 25, 2024

Choose a reason for hiding this comment

IanRamosC Oct 25, 2024

Choose a reason for hiding this comment

IanRamosC left a comment

Choose a reason for hiding this comment

CodeyGuyDylan commented Oct 22, 2024 •

edited

Loading

github-actions bot commented Oct 22, 2024 •

edited

Loading

github-actions bot commented Oct 22, 2024 •

edited

Loading